<template>
  <div class="deleted">
    <div class="deleted-layui">将选中的信息批量:</div>
    <div class="deleted-layui">
      <el-button type="text" @click="reduction">还原</el-button>
    </div>
    <div class="deleted-layui">
      <el-button type="text" @click="chage">转入公海</el-button>
    </div>
    <div class="deleted-layui">
      <el-button type="text" @click="clear">彻底删除</el-button>
    </div>
    <div class="deleted-layui">
      <el-button type="text" @click="open">清空回收站</el-button>
    </div>
  </div>
</template>


<script>
//清空回收站
import {
  ClearDeletedAxios,
  reductionDeletedAxios,
  tochageDeletedAxios,
  thoroughDeletedAxios,
} from "../http/apis/deletedApi";
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState("callbackStore", ["Deleted"]),
  },
  methods: {
    //还原敏感操作
    reduction() {
      this.$confirm("此操作将选中文件还原, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(this.Deleted);
          const a = [];
          this.Deleted.forEach((item) => {
            a.push(item.id);
          });
          // a.toString();
          // console.log(a);
          reductionDeletedAxios(a.toString()); //还原
          this.$message({
            type: "success",
            message: "还原成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消还原",
          });
        });
    },
    //转入公海敏感操作
    chage() {
      this.$confirm("此操作将选中文件转入公海, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(this.Deleted);
          const a = [];
          this.Deleted.forEach((item) => {
            a.push(item.id);
          });
          // a.toString();
          // console.log(a);
          tochageDeletedAxios(a.toString()); //转入公海
          this.$message({
            type: "success",
            message: "还原成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消还原",
          });
        });
    },
    //彻底删除敏感操作
    clear() {
      this.$confirm("此操作将选中所有文件删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(this.Deleted);
          const a = [];
          this.Deleted.forEach((item) => {
            a.push(item.id);
          });
          // a.toString();
          // console.log(a);
          thoroughDeletedAxios(a.toString()); //彻底删除
          this.$message({
            type: "success",
            message: "清空回收站成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消清空回收站",
          });
        });
    },
    //清空回收站敏感操作
    open() {
      this.$confirm("此操作将清空所有文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          ClearDeletedAxios();
          this.$message({
            type: "success",
            message: "清空回收站成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消清空回收站",
          });
        });
    },
  },
};
</script>

<style lang="scss">
.deleted {
  display: flex;
}
.deleted-layui {
  background: #333333;
  border-radius: 4px;
  color: #ffffff;
  font-size: 14px;
  padding: 5px 15px;
  margin-left: 10px;
}

.deleted-layui:nth-child(1) {
  background: #ffffff;
  color: #333333;
}
.deleted-layui:nth-child(2) {
  background: #666;
  cursor: pointer;
}
.deleted-layui:nth-child(3) {
  background: #ad30a9;
  cursor: pointer;
}
.deleted-layui:nth-child(4) {
  background: #434443;
  cursor: pointer;
}
.deleted-layui:nth-child(5) {
  background: #c7c4c4;
  cursor: pointer;
}
</style>